<!doctype html>
[#escape x as (x)!?html]
<html lang="[=lang!.lang]">

<head>
    <title>[=title!'无标题']</title>
    [#include "/layout/head.html"]
</head>

<body class="bg-white/95 dark:bg-neutral-800/95 transition-all duration-600 ease-in-out">
    [#include "/layout/header.html"]
    <!-- 主内容 -->
    <main class="container mx-auto px-4 md:px-6 pt-24 md:pt-28 pb-16 dark:bg-neutral-700">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            <!-- 文章内容 -->
            <article class="lg:col-span-8 prose-custom dark:text-white">
                <!-- 文章标题区域 -->
                <div class="mb-8">
                    <h1 class="font-bold leading-tight text-balance mb-4">
                        [=post1]
                        [=post.postTitle1]
                        ${post.postTitle1}lllllllllllllllll
                    </h1>
                    <!-- 作者和日期 -->
                    <div class="flex items-center space-x-4 mb-6">
                        [#if post.user??]
                        <img src="[=post.user.avatar]" alt="[=post.user.nickName]"
                            class="w-12 h-12 rounded-full object-cover">
                        [/#if]
                        [=post.user.name]
                        <div>
                            [#if post.user??]
                            <p class="font-medium">
                                [=post.user.nickName]
                            </p>
                            [/#if]
                            <p class="text-sm">
                                <span><i class="fa-solid fa-calendar-alt mr-1"></i>[=post.postDate]</span>
                                <span><i class="fa-solid fa-user mr-1"></i>[=post.postAuthorName]</span>
                                <span><i class="fa-solid fa-eye mr-1"></i>[=post.postViews!0]</span>
                            </p>
                        </div>
                    </div>
                    [#list post.tags![]]
                    <!-- 标签 -->
                    <div class="flex flex-wrap gap-2 mb-6">
                        [#items as tag]
                        <a href="/tags/[=tag.slug!'']"
                            class="px-3 py-1 rounded-full text-sm font-medium">#[=tag.name!'']</a>
                        [/#items]
                    </div>
                    [/#list]
                    <!-- 文章特色图 -->
                    <div class="relative overflow-hidden rounded-xl shadow-lg mb-8">
                        <img src="[=post.postImage!'']" alt="[=post.postTitle!'']"
                            class="w-full h-auto object-cover transition-transform duration-500 hover:scale-105">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
                            <div class="p-6 text-white">
                                <p class="text-sm md:text-base opacity-90"> [=post.postExcerpt!'']</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 文章正文 -->
                <div class="space-y-6 text-lg text-gray-300 dark:text-white/95">
                    [=post.postContent]
                </div>

                <!-- 文章底部互动区 -->
                <div class="mt-12 pt-8  dark:text-white">
                    <!-- 分享按钮 -->
                    <div class="flex flex-wrap justify-between items-center mb-8" id="post-btn">
                        [#--
                        <div class="mb-4 md:mb-0">
                            <p class="text-gray-600 font-medium">分享本文：</p>

                            <div class="flex space-x-3 mt-2">
                                <a href="#"
                                    class="w-10 h-10 rounded-full flex items-center justify-center transition-all hover:text-white">
                                    <i class="fa-brands fa-facebook-f"></i>
                                </a>
                                <a href="#"
                                    class="w-10 h-10 rounded-full flex items-center justify-center transition-all hover:text-white">
                                    <i class="fa-brands fa-twitter"></i>
                                </a>
                                <a href="#"
                                    class="w-10 h-10 rounded-full flex items-center justify-center transition-all hover:text-white">
                                    <i class="fa-brands fa-linkedin-in"></i>
                                </a>
                                <a href="#"
                                    class="w-10 h-10 rounded-full flex items-center justify-center transition-all hover:text-white">
                                    <i class="fa-brands fa-whatsapp"></i>
                                </a>
                                <a href="#"
                                    class="w-10 h-10 rounded-full flex items-center justify-center transition-all hover:text-white">
                                    <i class="fa-brands fa-pinterest"></i>
                                </a>
                            </div>
                        </div>
                        --]
                        <div class="flex items-center space-x-2">
                            <button class="flex items-center space-x-1 px-4 py-2 rounded-full transition-colors action"
                                data-id="[=post.id!''?string]" data-action="like">
                                <i class="fa-solid fa-thumbs-up"></i>
                                <span>点赞 ([=post.postLikes!0])</span>
                            </button>
                            <button class="flex items-center space-x-1 px-4 py-2 rounded-full transition-colors action"
                                data-id="[=post.id!''?string]" data-action="dislike">
                                <i class="fa-solid fa-thumbs-down"></i>
                                <span>踩下 ([=post.postDislikes!0])</span>
                            </button>
                        </div>
                    </div>

                    <!-- 作者信息卡片 -->
                    [#if post.user??]
                    <div class="dark:text-white rounded-xl p-6 md:p-8 flex flex-col md:flex-row items-center mb-12">
                        <img src="[=post.user.avatar!'']" alt="[=post.user.nickName!'']"
                            class="w-20 h-20 rounded-full object-cover mb-4 md:mb-0 md:mr-6">
                        <div class="text-center md:text-left">
                            <h3 class="text-xl font-bold mb-1">
                                [=post.user.nickName]
                            </h3>
                            <p class="text-gray-400 mb-3">
                                [=post.user.summary]
                            </p>
                            <p class="text-gray-400 mb-4">
                                [=post.user.description]
                            </p>
                            [#--
                            <div class="flex justify-center md:justify-start space-x-3">
                                <a href="#" class="transition-colors">
                                    <i class="fa-brands fa-twitter"></i>
                                </a>
                                <a href="#" class="transition-colors">
                                    <i class="fa-brands fa-linkedin-in"></i>
                                </a>
                                <a href="#" class="transition-colors">
                                    <i class="fa-brands fa-github"></i>
                                </a>
                                <a href="#" class="transition-colors">
                                    <i class="fa-solid fa-globe"></i>
                                </a>
                            </div>
                            --]
                        </div>
                    </div>
                    [/#if]

                    <!-- 评论区 -->
                    <div class="dark:text-white" id="comment">
                        <h3 class="text-2xl font-bold mb-6">评论 ([=post.commentCount!0])</h3>
                        <!-- 评论输入框 -->
                        <form class="rounded-xl p-6 shadow-sm mb-8" id="comment-form">
                            <h4 class="text-lg font-medium mb-4">发表评论</h4>
                            <div class="flex space-x-4">
                                <input name="commentPostId" value="[=post.id!''?string]" hidden>
                                [#if post.user??]
                                <img src="[=post.user.avatar!'']" alt="[=post.user.nickName!'']"
                                    class="w-10 h-10 rounded-full object-cover">
                                <input name="commentAuthor" value="" hidden>
                                [/#if]
                                <div class="flex-1">
                                    <div class="flex py-2">
                                        <textarea name="commentContent" placeholder="分享你的想法..."
                                            class="w-full border border-gray-500 rounded-lg resize-none" rows="5">
                                    </textarea>
                                    </div>
                                    <div class="flex justify-end mt-3">
                                        <button type="submit" class="px-6 py-2 transition-colors action"
                                            data-post-id="'[=post.id!''?string]'" data-action="public">
                                            提交评论
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        [#if comments??]
                        <div class="space-y-6">
                            [#list comments as rootComment]
                            [@renderComment rootComment 0/]
                            [/#list]
                            [#--
                            <div class="text-center pt-4">
                                <button class="px-6 py-2 rounded-lg hover:bg-gray-300 transition-colors">
                                    加载更多评论
                                </button>
                            </div>
                            --]
                        </div>
                        [/#if]
                    </div>
                </div>
            </article>

            <!-- 侧边栏 -->
            <aside class="lg:col-span-4 space-y-8 dark:text-white">
                <!-- 作者信息 -->
                [#if post.user??]
                <div class="rounded-xl p-6 shadow-sm">
                    <div class="text-center mb-6">
                        <img src="[=post.user.avatar!'']" alt="[=post.user.nickName!'']"
                            class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-white shadow-md">
                        <h3 class="text-xl font-bold mb-1">[=post.user.nickName]</h3>
                        <p class="text-gray-600 mb-3">[=post.user.summary]</p>
                        [#--
                        <div class="flex justify-center space-x-3 mb-4">
                            <a href="#" class="transition-colors">
                                <i class="fa-brands fa-twitter"></i>
                            </a>
                            <a href="#" class="transition-colors">
                                <i class="fa-brands fa-linkedin-in"></i>
                            </a>
                            <a href="#" class="transition-colors">
                                <i class="fa-brands fa-github"></i>
                            </a>
                            <a href="#" class="transition-colors">
                                <i class="fa-solid fa-globe"></i>
                            </a>
                        </div>
                        <button
                            class="w-full py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            关注作者
                        </button>
                        --]
                    </div>

                    [#--
                    <div class=" pt-6">
                        <h4 class="font-semibold mb-4">作者统计</h4>
                        <div class="grid grid-cols-3 gap-2 text-center">
                            <div>
                                <p class="text-2xl font-bold text-primary">42</p>
                                <p class="text-sm">文章</p>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-primary">12.8k</p>
                                <p class="text-sm">粉丝</p>
                            </div>
                            <div>
                                <p class="text-2xl font-bold text-primary">456k</p>
                                <p class="text-sm">阅读</p>
                            </div>
                        </div>
                    </div>
                    --]
                </div>
                [/#if]
                [#list likePosts![]]
                <!-- 相关文章 -->
                <div class="hidden md:block">
                    <h3 class="text-xl font-bold mb-4">相关文章</h3>
                    <div class="space-y-4">
                        [#items as item]
                        <a href="/articles/[item.id!'']"
                            class="group flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-50 transition-colors">
                            [#if item.postImage??]
                            <img src="[=item.postImage!'']" alt=""
                                class="w-20 h-20 rounded-lg object-cover group-hover:scale-105 transition-transform">
                            [/#if]
                            <div>
                                <h4 class="font-medium line-clamp-2 group-transition-colors">
                                    [=item.postTitle!'']
                                </h4>
                                <p class="text-sm mt-1">[=item.postDate!'']</p>
                            </div>
                        </a>
                        [/#items]
                    </div>
                </div>
                [/#list]
            </aside>
        </div>
    </main>
    <!-- 评论弹窗模态框 -->
    <div id="comment-modal" class="fixed inset-0 z-50 hidden overflow-y-auto dark:text-white">
        <div class="min-h-screen flex items-center justify-center">
            <div class="bg-white dark:bg-neutral-800 w-full max-w-3xl rounded-lg p-6">
                <!-- 弹窗头部 -->
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-bold">文章评论</h2>
                    <button data-action="close" class="action" aria-label="关闭评论弹窗">
                        <i class="fa-solid fa-x w-10" aria-hidden="true"></i>
                    </button>
                </div>
                <!-- 评论输入框 -->
                <form class="mb-6" id="comment-modal-form">
                    <div class="flex space-x-4">
                        <img src="https://picsum.photos/40/40" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                        <div class="flex-1">
                            <textarea id="commentInput"
                                class="w-full px-3 py-2 rounded-md border border-gray-300 resize-none"
                                placeholder="写下你的评论...">
                           </textarea>
                        </div>
                        <button data-action="public" class="px-6 py-2 rounded-md action">
                            <i class="fa-solid fa-arrow-up-right-from-square w-10" aria-hidden="true"></i>发布
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    [#include "/layout/footer.html"]
    <script>
        function loadComment(id) {
            if (id) {
                // 向给定ID的用户发起请求
                axios.get('/comments/' + id)
                    .then(function (response) {
                        // 处理成功情况
                        // console.log(response);
                        // 安全过滤 HTML
                        const safeHtml = DOMPurify.sanitize(response.data);
                        const comment = document.getElementById('comment');
                        if (comment) {
                            comment.innerHTML = safeHtml;
                        }
                    })
                    .catch(function (error) {
                        // 处理错误情况
                        // console.log(error);
                    })
                    .finally(function () {
                        // 总是会执行
                    });
            }
        }
    </script>
    <script>
        // 评论输入框自动调整高度
        const textarea = document.querySelector('textarea');
        if (textarea) {
            textarea.addEventListener('input', function () {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
            });
        }
    </script>
    <script>
        // 文章按钮
        document.getElementById('post-btn').addEventListener('click', function (e) {
            if (e.target.classList.contains('action')) {
                const action = e.target.dataset.action;
                const id = e.target.dataset.id;
                if (action) {
                    if (action === 'like') {
                        http.patch('/articles/' + id, { action: action })
                    }
                    if (action === 'dislike') {
                        http.patch('/articles/' + id, { action: action })
                    }
                }
            }
        })
        const commentForm = document.getElementById('comment-form');
        commentForm.addEventListener('submit', async (e) => {
            e.preventDefault(); // 阻止表单默认提交行为
            const formData = new FormData(commentForm);
            const data = formData;
            http.post('/comments', {}, data)
        });
        // 评论按钮
        document.getElementById('comment').addEventListener('click', function (e) {
            if (e.target.classList.contains('action')) {
                // 评论动作 
                const action = e.target.dataset.action;
                // 评论id
                const id = e.target.dataset.id;
                // 文章id
                const postId = e.target.dataset.postId;
                if (action) {
                    // 打开弹窗
                    if (action === 'open') {
                        if (modal) {
                            modal.classList.remove('hidden');
                        }
                    }
                    // 点赞
                    if (action === 'like') {
                        http.patch('/comments/' + id, { action: action })
                    }
                    // 踩
                    if (action === 'dislike') {
                        http.patch('/comments/' + id, { action: action })
                    }
                }
            }
        });
        // 评论弹窗按钮
        const modal = document.getElementById('comment-modal');
        modal.addEventListener('click', function (e) {
            if (e.target.classList.contains('action')) {
                const action = e.target.dataset.action;
                const id = e.target.dataset.id;
                if (action) {
                    if (action === 'close') {
                        if (modal) {
                            modal.classList.add('hidden')
                        }
                    }
                }
            }
        })
    </script>


    [#assign dateFormat = "yyyy-MM-dd HH:mm"]
    [#macro renderComment comment depth]
    <div class="rounded-xl p-6 shadow-sm transform transition-all duration-300 hover:shadow-md pl-6">
        <div class="flex items-start space-x-4">
            [#if user??]
            <img src="[user.avatar!'']" alt="[user.nickName!'']" class="w-10 h-10 rounded-full object-cover">
            [/#if]
            <div class="flex-1">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <h4 class="font-medium">[=comment.commentAuthor!'']</h4>
                        <p class="text-sm">
                            [#if comment.commentDate??]
                            [=comment.commentDate?datetime(dateFormat)]
                            [#else]
                            [/#if]
                        </p>
                    </div>
                </div>
                <p class="text-gray-300 mb-3">
                    [=comment.commentContent!'']
                </p>
                <div class="flex items-center space-x-4">
                    <button class="flex items-center space-x-1 transition-colors action"
                        data-id="[=comment.commentId!'']" data-action="like">
                        <i class="fa-solid fa-thumbs-up"></i>
                        <span>[=comment.commentLikes!0]</span>
                    </button>
                    <button class="flex items-center space-x-1 transition-colors action"
                        data-id="[=comment.commentId!'']" data-action="dislike">
                        <i class="fa-solid fa-thumbs-down"></i>
                        <span>[=comment["commentDislikes"]!0]</span>
                    </button>
                    <button class="flex items-center space-x-1 transition-colors action"
                        data-id="[=comment.commentId!'']" data-action="open">
                        <i class="fa-solid fa-reply"></i>
                        <span>回复</span>
                    </button>
                </div>
                [#if comment.children?? && comment.children?size > 0]
                <div class="mt-4 pl-4 space-y-4">
                    [#list comment.children as childComment]
                    [@renderComment childComment depth + 1/]
                    [/#list]
                </div>
                [/#if]
            </div>
        </div>
    </div>
    [/#macro]
</body>

</html>
[/#escape]